<template>
  <div class="app-container">
    <h3>App2组件</h3>
<!--    当安装和配置了vue-router 后，就可以使用router-link 来替代普通的 a 链接了-->
<!--    <a href="#/home">首页</a>-->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-link to="/about">关于</router-link>

<!--  只要在项目中安装和配置了 vue-router,就可以使用router-view这个组件了， router-view就是一个占位符-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
